<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_022_组件之间的数据交互</title>

</head>
<body>
    <div id="app">
        组件的注册，关键字：component <br />
        父组件向子组件传值：关键字 props<br />
        <menu-item></menu-item>
        <menu-item title="父组件向子组件传递信息"></menu-item>
        动态的传递属性：<input type="text" v-model="title1" />
        <menu-item v-bind:title="title1"></menu-item>
        传递多个属性，属性也尽量不要用驼峰式命名的方法
        <menu-item v-bind:title="title1" shuxing2="父组件向子组件传递第二个属性"></menu-item>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    //component() 两个参数  参数一：组件的名称  参数二：是一个对象
    //组件名称只能出现首写字母大写，其余的都不能大写，如果使用驼峰式的明明方式，在使用组件的时候，只能在模板中使用组件
        // Vue.component("ZujianName",{ //这是驼峰式组件
        Vue.component("menu-item",{
            props:["title","shuxing2"],
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    msg:"子组件本身的数值"
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            template:`
                <div style="border:1px solid red;height:30px;width:1000px">
                    {{msg + "---" + title + "---" + shuxing2}}
                </div>
            `
        });
        var vm = new Vue({
            el:'#app',
            data:{
                title1:"父组件动态向子组件传递消息"
            }
        });

    </script>
</body>

</html></SCRIPT>